<div class="grid animated fadeIn">

    <div *ngIf="!isObserver" class="col-12"  id="div_new_dashboard">
        <eda-dashboard-panel class="pointer" >

            <div id="home_new_dashboard" class="d-flex justify-content-center" (click)="createDashboard = true;">
                <h3 i18n="@@tituloNuevoInforme">
                    Crear nuevo informe
                </h3>
            </div>

        </eda-dashboard-panel>
    </div>  




    <div class="col-12 " *ngIf="tags.length !== 2" style="margin-top: 2em;">
        <p-toolbar class="tag-container" >
            <span class="tag-label"> Tags: </span>
            <span
                [className]="selectedTag === tag.value || (tag.value === null && selectedTag === 0 )? 'tag active' : 'tag' "
                *ngFor="let tag of tags" (click)="filterDashboards(tag)">{{tag.label}}</span>

        </p-toolbar>
    </div>


    <!-- Buscador -->
    <div class="col-12 ml-3"  *ngIf="filteringByName==true ||  (visibleDashboards.publics.length >3 || visibleDashboards.grups.length >3 || visibleDashboards.grups.length >3 || visibleDashboards.privats.length >3 )" style="margin-top: 0em;">
        <p-toolbar class="tag-container" >
            <p-toolbar class="tag-container" >
                <i class="fa fa-search" style="font-size: 16px"></i>
                <input type="text" id="buscador"  name="buscador" (keyup)="filterTitle($event)"   i18n-placeholder="@@buscarPorNombre" placeholder="Buscar por nombre del informe"> 
            </p-toolbar>
        </p-toolbar>
    </div>


    <!-- PUBLICS -->
    <div class="col-12 lg:col-3" id="public-list">
        <h4 i18n="@@tituloGrupoPublicos" class="visibility-segment">
            PUBLICOS
        </h4>

        <div *ngFor="let dashboard of visibleDashboards.shared" class="col-12 md:col-12 mb-2" style="padding: 0px;">

            <eda-dashboard-panel>
                <div class="d-flex justify-content-between align-items-end">

                    <h3 (click)="goToDashboard(dashboard)" class="pointer">
                        {{dashboard.config.title}}
                    </h3>

                    
                    <span *ngIf=" !isObserver   &&  canIEdit(dashboard)   " (click)="deleteDashboard(dashboard)" class="pointer">
                        <i class="fa fa-trash" style="font-size: 16px"></i>
                    </span>

                </div>
            </eda-dashboard-panel>

        </div>
    </div>
    <!-- COMUN -->
    <div class="col-12 lg:col-3"   id="common-list">
        <h4 i18n="@@tituloGrupoComunes" class="visibility-segment">
            COMUNES
        </h4>

        <div *ngFor="let dashboard of visibleDashboards.publics" class="col-12 md:col-12 mb-2" style="padding: 0px;">

            <eda-dashboard-panel>
                <div class="d-flex justify-content-between align-items-end">

                    <h3 (click)="goToDashboard(dashboard)" class="pointer">
                        {{dashboard.config.title}}
                    </h3>

                    <span *ngIf=" !isObserver   &&  canIEdit(dashboard)  " (click)="deleteDashboard(dashboard)" class="pointer">
                        <i class="fa fa-trash" style="font-size: 16px"></i>
                    </span>

                </div>
            </eda-dashboard-panel>

        </div>
    </div>
    <!-- GROUPS -->
    <div class="col-12 lg:col-3"  id="group-list">
        <h4 i18n="@@tituloGrupoMisGrupos" class="visibility-segment">
            MIS GRUPOS
        </h4>

        <div *ngFor="let group of groups" class="col-12" style="padding: 0px;">
            <!-- <h6>{{group.name}}:</h6> -->

            <div *ngFor="let dashboard of visibleDashboards.grups | ids:'group':group" class="col-12 md:col-12 mb-2"
                style="padding: 0px;">
                <ng-container>
                    <eda-dashboard-panel>
                        <h3 (click)="goToDashboard(dashboard)" class="pointer">
                            {{dashboard.config.title}}
                        </h3>

                        <div class="d-flex justify-content-between align-items-end">
                            <span style="text-align: left;">{{getGroupsNamesByDashboard(dashboard.group)}}</span>

                            <span *ngIf=" !isObserver   &&  canIEdit(dashboard)  " (click)="deleteDashboard(dashboard)" class="pointer">
                                <i class="fa fa-trash" style="font-size: 16px"></i>
                            </span>
                        </div>
                    </eda-dashboard-panel>
                </ng-container>

            </div>
        </div>
    </div>
    <!-- PRIVATES -->
    <div class="col-12 lg:col-3" id="private-list">
        <h4 i18n="@@tituloGrupoPersonales" class="visibility-segment">
            PRIVADOS
        </h4>

        <div *ngFor="let dashboard of visibleDashboards.privats" class="col-12 md:col-12 mb-2" style="padding: 0px;">

            <ng-container *ngIf="!isAdmin">
                <eda-dashboard-panel>
                    <div class="d-flex justify-content-between align-items-end">

                        <h3 (click)="goToDashboard(dashboard)" class="pointer">
                            {{dashboard.config.title}}
                        </h3>

                        <span *ngIf=" !isObserver   &&  canIEdit(dashboard)  " (click)="deleteDashboard(dashboard)" class="pointer">
                            <i class="fa fa-trash" style="font-size: 16px"></i>
                        </span>

                    </div>
                </eda-dashboard-panel>
            </ng-container>

            <ng-container *ngIf="isAdmin">
                <eda-dashboard-panel>
                    <h3 (click)="goToDashboard(dashboard)" class="pointer">
                        {{dashboard.config.title}}
                    </h3>

                    <div class="d-flex justify-content-between align-items-end">
                        <span>{{dashboard.user?.name}}</span>

                        <span *ngIf=" !isObserver   &&  canIEdit(dashboard)  " (click)="deleteDashboard(dashboard)" class="pointer">
                            <i class="fa fa-trash" style="font-size: 16px"></i>
                        </span>
                    </div>

                </eda-dashboard-panel>
            </ng-container>

        </div>
    </div>

</div>



<app-create-dashboard *ngIf="createDashboard" (close)="onCloseCreateDashboard($event)"></app-create-dashboard>